<template>
	<view class="box2">
		<view class="box2_cen">
			<view class="box2_cen_like">
				<text v-for="(item,index) in waitList" :key="index">
					{{index+1}}.{{item.text}}
				</text>
				<text>
					{{1}}.{{waitList[0].text}}
				</text>
			</view>
			<view class="box2_cen_btn">
				<image src="/static/image/serachIcon.png" mode="" @click="handle"></image>
			</view>
		</view>
		<view class="box2_img">
			<image src="/static/image/history.png" mode=""></image>
			<image src="/static/image/download.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navSearchComponent",
		data() {
			return {
				waitList: [{
					text: "三分喜欢"
				}, {
					text: "七分喜欢"
				}, {
					text: "十分喜欢"
				}]
			};
		},
		methods: {
			handle() {
				console.log("去搜索页")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box2 {
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		&_cen {
			width: calc(100% - 200rpx);
			border-radius: 40rpx;
			height: 80rpx;
			background-color: #f8f8f8;
			display: flex;
			color: $global-color;
			align-items: center;
			position: relative;
			overflow: hidden;

			&_like {
				width: calc(100% - 90rpx);
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 0rpx;
				left: 20rpx;
				animation: player 4s infinite;

				text {
					height: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					white-space: nowrap;
					width: 100%;
					overflow: hidden;
					padding: 0rpx 40rpx;
					box-sizing: border-box;
					text-overflow: ellipsis;
				}
			}

			@keyframes player {
				0% {
					transform: translateY(0rpx);
				}

				33% {
					transform: translateY(-80rpx);
				}

				66% {
					transform: translateY(-160rpx);
				}

				100% {
					transform: translateY(-240rpx);
				}
			}


			&_btn {
				position: absolute;
				top: calc(50% - 25rpx);
				right: 20rpx;
				width: 50rpx;
				height: 50rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		&_img {
			width: 200rpx;
			height: 100%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>